<template>
  <a-tree
    ref="aTreeRef"
    v-model="treeData"
    showCheckbox
    :isIcon="false"
    childrenIcon
    @handleNodeClick="handleNodeClick"
    @handleLabelClick="handleLabelClick"
  >
    <!-- 自定义图标 -->
    <template #icon="{ data }">
      <svg-icon
        v-if="!data.isExpand && data.children?.length"
        icon-class="no-folder"
      />
      <svg-icon
        v-if="data.isExpand && data.children?.length"
        icon-class="folder"
      />
      <svg-icon
        v-if="!data.children && !data.children?.length"
        icon-class="file"
      />
    </template>
  </a-tree>
</template>

<script setup lang="ts">
import aTree from "@/components/aTree/index.vue";
const aTreeRef = ref();
const treeData = ref([
  {
    id: 1,
    label: "Level one 1",
    isExpand: false,
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        isExpand: false,
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
            isExpand: false,
          },
          {
            id: 10,
            label: "Level three 1-1-2",
            isExpand: false,
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    isExpand: false,
    children: [
      {
        id: 5,
        label: "Level two 2-1",
        isExpand: false,
      },
      {
        id: 6,
        label: "Level two 2-2",
        isExpand: false,
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    isExpand: false,
    children: [
      {
        id: 7,
        label: "Level two 3-1",
        isExpand: false,
      },
      {
        id: 8,
        label: "Level two 3-2",
        isExpand: false,
      },
    ],
  },
]);

function handleNodeClick(data, node) {
  // console.log("-=======", node);
  if (data.children && data.children.length) {
    data.isExpand = !data.isExpand;
  }
}

function handleLabelClick(data, node) {
  // console.log("handleLabelClick", data, node);
}

</script>

<style lang="scss" scoped>
</style>